{% load i18n %}
{% block content %}
  <div style="margin: 15px;">
    <blockquote class="layui-elem-quote layui-text" style="border-left: 0 solid">
      {% trans 'system_operation_supportHelpTxt' %}
    </blockquote>
    <form class="layui-form action-form" style="overflow: auto;"  action="{{ form_url }}" method="post"
          id="user_changepassword_navbar">{% block form_top %}{% endblock %}
      <div>
        {% csrf_token %}
        {% for field in form %}
          <div class="layui-form-item">
            <label class="layui-form-label" style="width: 140px;">{{ field.label }}
                 {% if field.field.required%}
                    <span class="required">*</span>
                 {% endif %}
            </label>
            <div class="layui-input-inline">
              {{ field }}
            </div>
          </div>
        {% endfor %}
        {#<script type="text/javascript">document.getElementById("{{ first_form_field_id }}").focus();</script>#}
      </div>
    </form>
  </div>
  <script>
    layui.use(['form', 'laydate'], function () {
      var form = layui.form;
      var laydate = layui.laydate;
      $("form.layui-form input.layui-datetime").each(function () {
        laydate.render({elem: this, type: 'datetime'});
      });
      $("form.layui-form input.layui-date").each(function () {
        laydate.render({elem: this, type: 'date'});
      });
      $("form.layui-form input.layui-time").each(function () {
        laydate.render({elem: this, type: 'time'});
      });
      form.render();
    });
  </script>
{% endblock %}